<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title" style="margin-bottom:15px">
        <a-space style="margin-left: 13px">
          <span>行政区划：</span>
          <a-input-group compact>
            <a-cascader
              v-model:value="value18"
              style="width: 100%"
              :options="options1"
              expand-trigger="hover"
                placeholder="请选择行政区"
                changeOnSelect
              />
            </a-input-group>
          </a-space>
          
            <a-space style="margin-left: 10px">
              <span>核验来源：</span>
              <a-select
              ref="select"
              v-model:value="role_type"
              style="width: 120px"
            >
              <a-select-option value="4" >乡镇</a-select-option>
              <a-select-option value="3">区级</a-select-option>
              <a-select-option value="2">市级</a-select-option>
            </a-select>
          </a-space>
       
            <a-space style="margin-left: 10px">
              <span>开始时间：</span>
              <a-date-picker v-model:value="startDate" :format="dateFormat" :disabledDate="disabledFutureDate"  />
            </a-space>
            <a-space style="margin-left: 10px">
              <span>结束时间：</span>
              <a-date-picker v-model:value="endDate" :format="dateFormat" :disabledDate="disabledFutureDate"  />
            </a-space>
            <a-space style=" margin-top: 15px; margin-left: 15px">
            <span>核验人员姓名：</span>
            <a-input
              v-model:value="nickname"
              placeholder="请输入核查人员姓名进行查询"
              style="width: 206px; margin-top: -10px"
            />
          </a-space>
          <a-space style="margin-left: 10px">
            <span>关键字：</span>
            <a-input
              v-model:value="txtKeyWord"
              placeholder="请输入姓名、地址或房屋编号进行查询"
              style="width: 256px; margin-top: -10px"
            />
          </a-space>
            <a-space class="search-btn" style="margin-left: 10px">
              <a-checkbox v-model:checked="checked">重点村</a-checkbox>
            </a-space>
            <a-space style="margin-top: 15px; margin-left: 15px">
            <a-form-item name="cs">
            <a-checkbox
              v-model:checked="checkAll"
              v-model:value="checkValue"
              @change="onCheckAllChange"
            >
             全部
            </a-checkbox></a-form-item>
          </a-space>
          <a-space style="margin-top: 15px; ">
            <a-form-item name="cs">
              <a-checkbox-group v-model:value="cs" @change="handleChange">
                <a-checkbox value="1">一层</a-checkbox>
                <a-checkbox value="2">二层</a-checkbox>
                <a-checkbox value="3">三层</a-checkbox>
                <a-checkbox value="4">三层及以上</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
          </a-space>

          <a-space>
              <a-select
              ref="select"
              v-model:value="jsrysstd"
              style="width: 180px;margin-right:10px;margin-left:10px"
            >
            <a-select-option value="" >是否满足“双通道”要求</a-select-option>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-space>
          <a-space>
              <a-select
              ref="select"
              v-model:value="wdwhjgfjgqsyyrkrgbdj"
              style="width: 240px;margin-right:10px"
            >
            <a-select-option value="" >是否存在彩钢板建筑出租住人</a-select-option>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-space>
          <a-space>
              <a-select
              ref="select"
              v-model:value="sfczckfhwggptzl"
              style="width: 280px;margin-right:10px"
            >
            <a-select-option value="" >是否存在窗口防护网、广告牌、铁栅栏</a-select-option>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-space>
          <a-space>
              <a-select
              ref="select"
              v-model:value="use_electric_bicycle"
              style="width: 320px;margin-right:10px"
            >
            <a-select-option value="" >电动自行车及蓄电池是否在室内停放充电</a-select-option>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-space>
          <a-space>
              <a-select
              ref="select"
              v-model:value="fwyfwdddzxccdsssfayqjshsf"
              style="width: 350px;margin-right:10px"
            >
            <a-select-option value="" >服务于房屋的电动自行车充电设施是否按要求建设</a-select-option>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-space>
          <a-space>
              <a-select
              ref="select"
              v-model:value="use_bottled_liquefied_gas"
              style="width: 220px;margin-right:10px"
            >
            <a-select-option value="" >是否违规使用液化石油气瓶</a-select-option>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-space>
          <a-space>
              <a-select
              ref="select"
              v-model:value="use_stacked_items"
              style="width: 220px;margin-right:10px"
            >
            <a-select-option value="" >疏散通道是否堆放杂物</a-select-option>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-space>
          <a-space>
              <a-select
              ref="select"
              v-model:value="slljdx"
              style="width: 220px"
            >
            <a-select-option value="" >是否私拉乱接电线</a-select-option>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-space>
       
            <a-space class="search-btn">
            <a-button type="primary" @click="searchBtn">查询</a-button>
          </a-space>
          <div style="float: right; width: 15%">
          <a-space style="float: right; margin-right: 10px;">
            <a-button type="primary" @click="handleExport"> 导出</a-button>
          </a-space>
        </div>
      </div>
      <a-table
        style="margin-top: 0px"
        :dataSource="tableData"
        :columns="displayColumns"
        :pagination="false"
        :scroll="{ x: 1500, y: tableHeight }"
        bordered
        :loading="loading"
      />
      <div class="pagination" style="float: right">
        <div style="float: left; line-height: 32px; padding-right: 12px">共{{ total }}条记录</div>
        <a-pagination
          show-size-changer
          show-total
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
          style="float: right"
          @show-size-change="onShowSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import moment from 'moment';
import dayjs from 'dayjs';
import { ref, reactive, toRefs, onMounted, onBeforeMount, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { hyhousemcListApi } from '/@/api/demo/table'; //获取房屋列表
import { getRegion } from '/@/api/demo/system'; //统计工作进展
import { useUserStore } from '/@/store/modules/user';
import { iTableData, iTableColumns } from './types/table';
import { iParams } from './types/params';
import { downloadByUrl } from '/@/utils/file/download';
import { useGlobSetting } from '/@/hooks/setting';
let userInfo = ref<any>(null);
let options = ref<any[]>([]);
let detailTableHeight = ref<number>(0); // 表格高度
let tableHeight = ref<number>(0); // 表格高度
let pageIndex = ref(1);
let pageSize = ref(15);
const value18 = ref<string[]>([]);
let options1 = ref<any[]>([]);
let txtKeyWord = ref<string>('');
let total = ref(0);
const checked = ref(false);
const dateFormat = 'YYYY-MM-DD';
const startDate = ref<any>(null); // 开始时间
const endDate = ref<any>(null); // 结束时间
const role_type = ref<string>('3'); // 
const jsrysstd = ref<string>(''); // 是否满足“双通道”要求
const wdwhjgfjgqsyyrkrgbdj = ref<string>(''); //是否存在彩钢板建筑出租住人
const sfczckfhwggptzl = ref<string>(''); //是否存在窗口防护网、广告牌、铁栅栏
const use_electric_bicycle = ref<string>(''); //电动自行车及蓄电池是否在室内停放充电',
const fwyfwdddzxccdsssfayqjshsf = ref<string>(''); //服务于房屋的电动自行车充电设施是否按要求建设
const use_bottled_liquefied_gas = ref<string>(''); //是否违规使用液化石油气瓶
const use_stacked_items = ref<string>(''); //疏散通道是否堆放杂物
const slljdx = ref<string>(''); //是否私拉乱接电线
const nickname = ref<string>(''); //核验人员姓名
const cs = ref<string[]>([]);; //层数
const checkAll = ref(true); //全部层数
const checkValue= ref<string>('0');
  const disabledFutureDate = (current) => {
  return current && current > moment().endOf('day');
};
// 使用 useRouter 创建一个 router 实例
const router = useRouter();
const globSetting = useGlobSetting();
const userStore = useUserStore();
let data = reactive<{
  tableData: iTableData[];
  tableColumns: iTableColumns[];
  wscolsList: { wch: number }[];
  id: number | any;
  loading: Boolean;
  keyWorld: String;
  currentqx: string; // 当前行政区名称
  currentTitle: string;
  cityToken: string | any;
}>({
  // 表格数据
  tableData: [],
  tableColumns: [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 80,
    },

    {
      title: '区名称',
      dataIndex: 'xzq',
      key: 'xzq',
      align: 'left',
      width: 100,
    },
    {
      title: '街/乡镇名称',
      dataIndex: 'towndm',
      key: 'towndm',
      align: 'left',
      width: 130,
    },
    {
      title: '村/社区名称',
      dataIndex: 'villagedm',
      key: 'villagedm',
      align: 'left',
      width: 180,
    },
    {
      title: '户主姓名',
      dataIndex: 'hzxm',
      key: 'hzxm',
      align: 'center',
      width: 100,
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
      width: 280,
    },
    {
      title: '房屋编号',
      dataIndex: 'fwbh',
      key: 'fwbh',
      align: 'center',
      width: 180,
      customCell: (row) => {
        return {
          innerHTML: `<span style='color:blue;cursor:pointer;text-decoration:underline' >${row.fwbh}</span>`,
          onClick: async () => {
            getDetailData(row);
          },
        };
      },
    },
    {
      title: '房屋层数',
      dataIndex: 'cs',
      key: 'cs',
      align: 'left',
      width: 100,
    },
    {
      title: '是否满足“双通道”要求',
      dataIndex: 'jsrysstd',
      key: 'jsrysstd',
      align: 'center',
      width: 180,
    },
    {
      title: '是否存在彩钢板建筑出租住人',
      dataIndex: 'wdwhjgfjgqsyyrkrgbdj',
      key: 'wdwhjgfjgqsyyrkrgbdj',
      align: 'center',
      width: 150,
    },
    {
      title: '是否存在窗口防护网、广告牌、铁栅栏',
      dataIndex: 'sfczckfhwggptzl',
      key: 'sfczckfhwggptzl',
      align: 'center',
      width: 160,
    },
    {
      title: '电动自行车及蓄电池是否在室内停放充电',
      dataIndex: 'use_electric_bicycle',
      key: 'use_electric_bicycle',
      align: 'center',
      width: 220,
    },
    {
      title: '服务于房屋的电动自行车充电设施是否按要求建设',
      dataIndex: 'fwyfwdddzxccdsssfayqjshsf',
      key: 'fwyfwdddzxccdsssfayqjshsf',
      align: 'center',
      width: 250,
    },
    {
      title: '是否违规使用液化石油气瓶',
      dataIndex: 'use_bottled_liquefied_gas',
      key: 'use_bottled_liquefied_gas',
      align: 'center',
      width: 180,
    },

    {
      title: '疏散通道是否堆放杂物',
      dataIndex: 'use_stacked_items',
      key: 'use_stacked_items',
      align: 'center',
      width: 120,
    },

    {
      title: '是否私拉乱接电线',
      dataIndex: 'slljdx',
      key: 'slljdx',
      align: 'center',
      width: 120,
    },
    {
      title: '其他高风险火灾隐患问题',
      dataIndex: 'notes',
      key: 'notes',
      align: 'center',
      width: 120,
    },
    {
      title: '核验时间',
      dataIndex: 'create_on',
      key: 'create_on',
      align: 'center',
      width: 250,
    },
    {
      title: '核验人员',
      dataIndex: 'create_name',
      key: 'create_name',
      align: 'center',
      width: 150,
    },
  ],
  id: null,
  loading: true,
  keyWorld: '',
  cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
  currentqx: '', // 当前行政区名称
  currentTitle: '', // 当前详情标题
  wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
});
// 表格的 ref Dom名称
let { tableData, loading } = toRefs(data);
async function getData() {
  if (startDate.value == null) {
    let currentDate = moment().format('YYYY-MM-DD');
    const start: any = dayjs(currentDate);
    const end: any = dayjs(currentDate);
    startDate.value = start;
    endDate.value = end;
  }
  let params = {
    pageIndex: pageIndex.value,
    pageSize: pageSize.value,
    txtKeyWord: txtKeyWord.value,
    yhly: role_type.value,
    startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
    endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
    cked: checked.value,
    jsrysstd: jsrysstd.value,
    wdwhjgfjgqsyyrkrgbdj: wdwhjgfjgqsyyrkrgbdj.value,
    sfczckfhwggptzl: sfczckfhwggptzl.value,
    use_electric_bicycle: use_electric_bicycle.value,
    fwyfwdddzxccdsssfayqjshsf: fwyfwdddzxccdsssfayqjshsf.value,
    use_bottled_liquefied_gas: use_bottled_liquefied_gas.value,
    use_stacked_items: use_stacked_items.value,
    slljdx: slljdx.value,
    cs:cs.value+'',
    nickname:nickname.value
  };
  if (value18.value != undefined) {
    params.xzqdm = value18.value[0];
    params.towndm = value18.value[1];
    params.villagedm = value18.value[2];
  }
  loading.value = true;
  let res: any = await hyhousemcListApi(params);
  console.log('@res--工作进入汇总表', res.items);

  if (res || res.items.length > 0) {
    loading.value = false;
    data.tableData = [...res.items];
    console.log('@res--工作进入汇总表', tableData);
    total.value = res.total;
  }
}

function getUserInfo() {
  const userStore = useUserStore();
  userInfo.value = userStore?.getUserInfo;
}

function searchBtn() {
  data.loading = true;
  getData();
}

async function getRegionData() {
  let res: any = await getRegion();
  options1.value = res;
}
function onChange(value) {
  value18.value = value;
}
const displayColumns = computed(() => {
  const { role } = userInfo.value;
  let arr: any[] = [];
  if (role === 'City') {
    // qx
    arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
    return arr;
  } else if (role === 'Area') {
    // jz
    arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
    return arr;
  } else if (role === 'Street') {
    // cun
    arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
    console.log('@Aarr', arr);
    return arr;
  } else {
    return data.tableColumns;
  }
});
//跳转记录页面
function getDetailData(row: any) {
  router.push({
    path: '/utils/houseCheckLog',
    query: {
      xzq: row.xzq,
      town: row.towndm,
      village: row.villagedm,
      hzxm: row.hzxm,
      fwbh: row.fwbh,
    },
  });
}
// 当"全部"复选框状态变化时
const onCheckAllChange = (e) => {
    if (e.target.checked) {
      // 如果选中了"全部"，清空其他所有选择
      cs.value = [];
    }
  };
  const handleChange = (checkedValues) => {
  console.log('当前选中的楼层:', checkedValues);
  checkAll.value=false;
  // 处理"全部"选项的特殊逻辑
  if (checkedValues.includes('0')) {
    // 如果选择了"全部"，则只保留"全部"选项
    cs.value = ['0'];
  } else if (checkedValues.length === 4) {
    // 如果选择了除"全部"外的所有选项，自动选择"全部"
    cs.value = ['0'];
  }
  // 可以在这里触发数据查询或其他操作
  fetchDataWithCsFilter(cs.value);
};

const fetchDataWithCsFilter = (values) => {
  // 构建查询条件
  let condition = '';
  if (!values.includes('0') && values.length > 0) {
    condition = `${values.join(',')}`;
  }
  
  // 调用API或执行查询
  console.log('查询条件:', condition);
};
const onShowSizeChange = () => {
  // antDesign  自动给  pageIndex 和 pageSize 赋值
  //  pageIndex.value = pageIndex;
  //  pageSize.value = pageSize;
  // console.log('@pageIndex,pageSize', pageIndex, pageSize);
};
const getTableHeight = () => {
  setTimeout(() => {
    detailTableHeight.value = window.innerHeight;
    tableHeight.value = window.innerHeight;
  });
};
function handleExport() {
  const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
  const tk = userStore.getToken;
  var xzqdm = '';
  var towndm = '';
  var villagedm = '';
  if (value18.value != undefined) {
    if (value18.value[0] != undefined) {
      xzqdm = value18.value[0];
    }
    if (value18.value[1] != undefined) {
      towndm = value18.value[1];
    }
    if (value18.value[3] != undefined) {
      villagedm = value18.value[2];
    }
  }
  downloadByUrl({
    url:
      uriBase +
      '/static/other/builldings?access_token=' +
      tk +
      '&txtKeyWord=' +
      txtKeyWord.value +
      '&xzqdm=' +
      xzqdm +
      '&towndm=' +
      towndm +
      '&villagedm=' +
      villagedm +
      '&yhly=' +
      role_type.value +
      '&startTime=' +
      startDate.value.format('YYYY-MM-DD') +
      '&endTime=' +
      endDate.value.format('YYYY-MM-DD') +
      '&cked=' +
      checked.value+
      '&jsrysstd=' + jsrysstd.value+
      '&wdwhjgfjgqsyyrkrgbdj=' + wdwhjgfjgqsyyrkrgbdj.value+
      '&sfczckfhwggptzl=' + sfczckfhwggptzl.value+
      '&use_electric_bicycle=' +use_electric_bicycle.value+
      '&fwyfwdddzxccdsssfayqjshsf=' + fwyfwdddzxccdsssfayqjshsf.value+
      '&use_bottled_liquefied_gas=' + use_bottled_liquefied_gas.value+
      '&use_stacked_items=' + use_stacked_items.value+
      '&slljdx=' +slljdx.value+
      '&cs=' +cs.value+''+
      '&nickname=' +txtKeyWord.value,
    target: '_blank',
  });
}

watch(pageSize, () => {
  console.log('pageSize', pageSize.value);
  getData();
});
watch(pageIndex, () => {
  console.log('current', pageIndex.value);
  getData();
});
onBeforeMount(() => {
  getUserInfo();
});
onMounted(() => {
  console.log('******工作进展统计初始化******');
  getRegionData();
  getData();
  getTableHeight();
  // getTableData();
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
#map {
  height: calc(100vh - 140px);
}
.col-sql {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.x-houseMng-search {
  z-index: 100;
  margin: 6px;
  position: absolute;
}

.root-house-mng-main {
  margin: 6px;
}

.x-village-tabs {
  //z-index: 100;
  //position: absolute;
  width: 60vw;
  margin-top: 6px;
  margin-left: 40px;
  //background-color: rgba(34, 34, 34, 0.6);
  :deep(.ant-form) {
    margin-top: 6px;
  }

  // :deep(.ant-form-item-label) > label {
  //   color: white;
  // }
}
</style>
<style>
.ant-form-item{margin-bottom:5px !important}
</style>
